<template>
  <div class="map-box">
    <div class="title">
      <dv-decoration-5 class="decoration transfromColor"></dv-decoration-5>
      <h3 class="title-text transfromColor">地震数据可视化平台</h3>
    </div>
    <div class="menu-box">
      <div class="menu menu-left">
        <div @click="showMenuFn('M1')" class="menu-item">图源</div>
        <div @click="showMenuFn('M2')" class="menu-item">图层</div>
        <div @click="showMenuFn('M3')" class="menu-item">查询</div>
      </div>
      <div class="menu menu-right">
        <div @click="showMenuFn('M6')" class="menu-item">分析</div>
        <div @click="showMenuFn('M4')" class="menu-item">工具</div>
        <div @click="showMenuFn('M5')" class="menu-item">关于</div>
        <!-- <div class="menu-item">搜索</div> -->
      </div>
    </div>
    <div id="map" class="map"></div>
    <!-- 组件 -->
    <left-row></left-row>
    <span class="right-menu-list">
      <M0 />
      <M1 :Map="openMap" />
      <M2 :Map="openMap" />
      <M3 :Map="openMap" />
      <M4 :Map="openMap" />
      <M5 />
      <M6 :Map="openMap" />
    </span>

    <Tool-Bar :Map="openMap" />
    <Player />
    <div class="bottom-components">
      <dv-border-box-10
        backgroundColor="#00003bc1"
        :color="['#4789e3', '#65bfe5']"
        class="left-row-bg"
      >
        <Time-Scroll></Time-Scroll>
      </dv-border-box-10>
    </div>
    <!-- 弹窗 -->
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content" class="ol-popup-content"></div>
    </div>
  </div>
</template>

<script>
import { Map, Overlay, View } from "ol";
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style.js";
import { toStringHDMS } from "ol/coordinate.js";
import { toLonLat } from "ol/proj";

import { fromLonLat } from "@/utils";
import LeftRow from "@/components/LeftRow";
import Time_Scroll from "@/components/Time_Scroll.vue";
import ToolBar from "@/components/ToolBar.vue";
import Player from "@/components/Player.vue";

import M_0 from "@/components/right-components/M_0.vue";
import M_2 from "@/components/right-components/M_2";
import M_1 from "@/components/right-components/M_1";
import M_3 from "@/components/right-components/M_3.vue";
import M_4 from "@/components/right-components/M_4.vue";
import M_5 from "@/components/right-components/M_5.vue";
import M_6 from "@/components/right-components/M_6.vue";

import { getDataAll, getById, getFLone } from "@/api/index";
import {
  GMapLayer_1,
  TMapLayer_1,
  TMapLayer_1_s,
  TMapTitle_1,
  TMapTitle_1_s,
  UMapVector_1,
  UMapVector_2,
} from "@/utils/orignLayres";
import MapTools from "@/utils/mapTools";
export default {
  name: "Test1OlView",
  components: {
    "left-row": LeftRow,
    "Time-Scroll": Time_Scroll,
    "Tool-Bar": ToolBar,
    Player: Player,
    M0: M_0,
    M1: M_1,
    M2: M_2,
    M3: M_3,
    M4: M_4,
    M5: M_5,
    M6: M_6,
  },
  data() {
    return {
      openMap: null,
      point: this.$store.state.point,
      // token
      token: "b9031f80391e6b65bd1dd80dcde1b097",
      token1: "bffd0ce8bba01c741131af47c414eafc",
      t: "cfa8d419cee99810c9987fca7fe904c9",
      // 西宁的坐标
      center: [104, 36],
      z: 4.5,
      highlight: null,
    };
  },
  computed: {
    getPoint() {
      return this.$store.state.point;
    },
    getGoto() {
      return this.$store.state.goto;
    },
  },
  watch: {
    getPoint: {
      handler(newVal, oldVal) {
        this.point = newVal;
      },
      deep: true,
      immediate: true,
    },
    getGoto: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.setCenterPoint();
          this.$store.commit("setGoto", false);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.initMap();

    setTimeout(() => {
      this.setFlashPoint2(this.point.lon, this.point.lat, this.point.id);
    }, 1000);

    this.getDataAll();

    // 延期运行任务
    setTimeout(() => {
      // this.loadFaultLines()
    }, 4000);
  },

  methods: {
    initMap() {
      let _this = this;

      this.openMap = new Map({
        target: "map",
        layers: [GMapLayer_1],
        // layers: [TMapLayer_1_s, TMapTitle_1_s],
        view: new View({
          projection: "EPSG:3857", // 3857
          center: fromLonLat(_this.center[0], _this.center[1]),
          zoom: _this.z,
          // extent: [-180, -90, 180, 90]
          // extent:[-572513.341856, 5211017.966314, 916327.095083, 6636950.728974],
        }),
        // 显示鼠标位置坐标
        controls: [],
      });

      this.openMap.addLayer(UMapVector_1);
      this.openMap.addLayer(UMapVector_2);
      let l = {
        title: UMapVector_1.get("title"),
        name: UMapVector_1.get("name"),
        uid: UMapVector_1.ol_uid,
        id: new Date().getTime(),
        visible: UMapVector_1.get("visible"),
        type: UMapVector_1.get("type"),
        edit: false,
        delete: false,
        layer: UMapVector_1,
        children: [],
      };

      let l1 = {
        title: UMapVector_2.get("title"),
        name: UMapVector_2.get("name"),
        uid: UMapVector_2.ol_uid,
        id: new Date().getTime(),
        visible: UMapVector_2.get("visible"),
        type: UMapVector_2.get("type"),
        edit: false,
        delete: false,
        layer: UMapVector_2,
        children: [],
      };

      let layeres = this.$store.getters.getLayeres;

      layeres.al.push(l);
      layeres.al.push(l1);

      this.$store.commit("setLayeres", layeres);

      // 选中要素高亮显示
      // // 选中要素
      var featureOverlay = new VectorLayer({
        source: new VectorSource(),
        zIndex: 1000,
        style: new Style({
          fill: new Fill({
            color: "red",
          }),
          stroke: new Stroke({
            color: "red",
            width: 4,
          }),
          image: new CircleStyle({
            radius: 6,
            fill: new Fill({
              color: "red",
            }),
            stroke: new Stroke({
              color: "black",
              width: 1,
            }),
          }),
        }),
      });

      // // 弹窗
      const container = document.getElementById("popup");
      const content = document.getElementById("popup-content");
      const closer = document.getElementById("popup-closer");

      const overlay = new Overlay({
        element: container,
        autoPan: {
          animation: {
            duration: 250,
          },
        },
      });

      _this.openMap.addOverlay(overlay);

      // // 关闭按钮
      closer.onclick = function () {
        overlay.setPosition(undefined);
        closer.blur();
        return false;
      };

      this.openMap.addLayer(featureOverlay);

      // // 获取要素
      this.openMap.on("click", function (evt) {
        var feature = _this.openMap.forEachFeatureAtPixel(
          evt.pixel,
          function (feature) {
            return feature;
          }
        );
        const coordinate = evt.coordinate;
        const hdms = toStringHDMS(toLonLat(coordinate));
        if (feature !== _this.highlight) {
          if (_this.highlight) {
            featureOverlay.getSource().removeFeature(_this.highlight);
          }
          if (feature) {
            featureOverlay.getSource().addFeature(feature);
            let id = feature.get("g_id");
            let type = feature.get("g_type");

            let h = _this.getOne(id, type).then((res) => {
              content.innerHTML = res;
              overlay.setPosition(coordinate);
            });
          }
          _this.highlight = feature;
        }
      });
    },

    async getDataAll() {
      const { data: res } = await getDataAll(2011, 2012);

      this.$store.commit("setPoints", res);
    },
    setFlashPoint1(lon, lat, id) {
      var el = document.querySelector(".point_animation");
      if (el) {
        el.remove();
        console.log("el remove");
      }
      //第一种样式
      var element = document.createElement("div");
      this.setEvent(element, "click", id);

      element.className = "point_animation";
      var p = document.createElement("p");
      var span = document.createElement("span");
      element.appendChild(p);
      element.appendChild(span);
      var point_overlay = new Overlay({
        element: element,
        positioning: "center-center",
      });
      this.openMap.addOverlay(point_overlay);
      point_overlay.setPosition(fromLonLat(lon, lat));
    },
    setFlashPoint2(lon, lat, id) {
      var el = document.querySelector(".css_animation");
      if (el) {
        el.remove();
        console.log("el remove");
      }
      //第二种样式
      var ele = document.createElement("div");

      this.setEvent(ele, "click", id);
      ele.className = "css_animation";
      var point_overlay2 = new Overlay({
        element: ele,
        positioning: "center-center",
        zIndex: 1000,
      });
      this.openMap.addOverlay(point_overlay2);
      point_overlay2.setPosition(fromLonLat(lon, lat));
    },
    setFlashPoint() {
      //第一种样式
      var element = document.createElement("div");
      element.className = "point_animation";
      var p = document.createElement("p");
      var span = document.createElement("span");
      element.appendChild(p);
      element.appendChild(span);
      var point_overlay = new Overlay({
        element: element,
        positioning: "center-center",
      });
      this.openMap.addOverlay(point_overlay);
      point_overlay.setPosition(fromLonLat(120, 30));
      //第二种样式
      var ele = document.createElement("div");
      ele.className = "css_animation";
      var point_overlay2 = new Overlay({
        element: ele,
        positioning: "center-center",
      });
      this.openMap.addOverlay(point_overlay2);
      point_overlay2.setPosition(fromLonLat(110, 30));
    },

    // 设置地图中心点
    setCenterPoint() {
      var center = fromLonLat(this.point.lon, this.point.lat);
      if (this.openMap) {
        this.openMap.getView().animate({
          // 只设置需要的属性即可
          center: center, // 中心点
          zoom: 9, // 缩放级别
          rotation: undefined, // 缩放完成view视图旋转弧度
          duration: 1000, // 缩放持续时间，默认不需要设置
        });
      }
    },

    setEvent(element, event = "click", id) {
      if (element) {
        let _this = this;
        element.setAttribute("d_id", id);
        this.$store.commit("setSelectedId", id);
        element.addEventListener(event, function (e) {
          // console.log("click", e.target.getAttribute("d_id"));
          _this.$store.commit("setActiveMenu", "M0");
          // 判断是否获取到唯一值
          if (!e.target.getAttribute("d_id"))
            return _this.$message.error("无法获取唯一值");
          // 设置选中的id
          _this.$store.commit("setSelectedId", e.target.getAttribute("d_id"));
        });
      }
    },
    showMenuFn(m) {
      this.$store.commit("setActiveMenu", m);
    },

    // 断层线数据加载

    loadFaultLines1() {
      var mapTools = new MapTools(this.openMap);
      mapTools.loadGSFaultLine();
    },
    async getOne(id, type) {
      if (type == "point") {
        const { data: res } = await getById(id);
        if (!res) return "";
        var template = `<p>详细信息</p></p>
                        <table id="#table-3" cellpadding="5">
                          <tbody>
                            <tr align="left">
                              <td>id：</td>
                              <td colspan="3">${res.id}</td>
                            </tr>
                            <tr align="left">
                              <td>经度</td>
                              <td>${res.lon}</td>
                              <td>维度</td>
                              <td>${res.lat}</td>
                            </tr>
                            <tr align="left">
                              <td>震级</td>
                              <td>${res.scale}</td>
                              <td>深度</td>
                              <td>${res.depth}km</td>
                            </tr>
                            <tr align="left">
                              <td>时间</td>
                              <td colspan="3">${res.time}</td>
                            </tr>
                            <tr align="left">
                              <td>发生地</td>
                              <td colspan="3">${res.location}</td>
                            </tr>
                            <tr align="left">
                              <td>d_id</td>
                              <td colspan="3">${res.did}</td>
                            </tr>
                          </tbody>
                        </table>`;

        return template;
      } else {
        const { data: res } = await getFLone(id);
        if (!res) return "";
        var template = `<p>详细信息</p></p>
                        <table id="#table-3" cellpadding="5">
                          <tbody>
                            <tr align="left">
                              <td>id：</td>
                              <td colspan="3">${res.id}</td>
                            </tr>
                            <tr align="left">
                            <tr align="left">
                              <td>时间</td>
                              <td colspan="3">${res.time}</td>
                            </tr>
                            <tr align="left">
                              <td>名称</td>
                              <td colspan="3">${res.name}
                            </tr>
                            <tr align="left">
                              <td>长度</td>
                              <td colspan="3">${res.length}km</td>
                            </tr>
                          </tbody>
                        </table>`;

        return template;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.map-box,
.map {
  width: 100%;
  height: 100%;
}

.title {
  position: absolute;
  display: flex;
  top: 0;
  width: 100%;
  height: 100px;
  align-items: flex-start;
  justify-content: center;

  .decoration {
    position: absolute;
    top: 0;
    z-index: 9;
    width: 650px;
    height: 70px;
  }

  .title-text {
    font-size: 25px;
    font-weight: 600;
    color: #3f96a5;
    /* text-shadow: 7px 1px 5px #3f96a5; */
    z-index: 10;
    margin: 0;
    font-weight: bold;
    margin-top: 5px;
    // text-shadow: 0 5px 5px #3f96a5;
    // animation: flicker 1.2s infinite;
  }
}

.bottom-components {
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 900px;
  height: 65px;
  margin: 5px 10px;
}

@keyframes flicker {
  0% {
    opacity: 1;
    scale: 1;
  }

  50% {
    opacity: 1.85;
    scale: 1.02;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

.menu-box {
  position: absolute;
  box-sizing: border-box;
  top: 20px;
  left: 20%;
  right: 20%;
  width: 60%;
  height: 25px;
  padding: 0 5px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .menu {
    display: flex;
    width: 27%;
    height: 100%;
    flex-direction: row;

    .menu-item {
      padding: 0 30px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer;
      user-select: none;
      transition: 0.2s;
      background-color: #165e6b;
      border-radius: 8px;
      backdrop-filter: saturate(150%) blur(8px);
      -webkit-backdrop-filter: saturate(150%) blur(8px);
      animation: run-180e4964 1s linear;
      color: #139db5;
      // background: linear-gradient(135deg, #3f96a5 20px, transparent 0) top left,
      //   linear-gradient(-45deg, #3f96a5 20px, transparent 0) bottom right,
      // ;
      // clip-path: polygon(25% 0%, 100% 0%, 73% 100%, 0% 100%);
      // -webkit-clip-path: polygon(25% 0%, 100% 0%, 73% 100%, 0% 100%);

      &:hover {
        color: #fff;
        background-color: #3f96a5;
      }
    }
  }

  .menu-left {
    justify-content: flex-end;

    .menu-item {
      margin-right: -15px;

      -webkit-clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%);
      clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%);
    }
  }

  .menu-right {
    justify-content: flex-start;

    .menu-item {
      margin-left: -15px;

      clip-path: polygon(25% 0%, 100% 0%, 73% 100%, 0% 100%);
      -webkit-clip-path: polygon(25% 0%, 100% 0%, 73% 100%, 0% 100%);
    }
  }
}

/// 弹窗样式
.ol-popup {
  position: absolute;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
}
.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}
</style>
